<template>
    <div class="item-box">
        <span class="name">{{ data.name }}</span>
        <span class="icon" :style="{ background: color }"></span>
        <span class="value">{{ data.value }}%</span>
    </div>
</template>

<script lang="ts"  setup>
import { toRefs, PropType } from 'vue';
import { ListItem } from '../Ranking.vue';

const props = defineProps({
    data: {
        type: Array as unknown as PropType<ListItem>,
        require: true,
        default: () => [],
    },
    color: {
        type: String,
        require: true,
        default: ''
    }
});
const { data } = toRefs(props);
</script>

<style lang="scss" scoped>
.item-box {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    white-space: nowrap;
    // vertical-align: middle;

    .name {
        font-family: PingFangSC-Regular, sans-serif;
        font-weight: 400;
        font-size: 11px;
        color: #999999;
        min-width: 61px;
        display: inline-block;
        text-align: right;
    }

    .icon {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin: 0 9px 0 3px;
        display: inline-block;
    }

    .value {
        font-family: PingFangSC-Medium, sans-serif;
        font-weight: 500;
        font-size: 11px;
        color: #252525;
    }
}
</style>
